<!-- 文章详情-->
<template>
	<view class="htmlwen">
		<view class="nav" style="margin-top: 13px;">
			<uniNavBar height="65px" left-icon="left" background-color='#FFF' title="文章详情" @clickLeft="back"
				class="setonl" :border="false" />
				</view>
			<view class="title" style="font-weight: 800;">{{pramdata.title}}</view>
			<view class="articleauthor">
				<view class="articleauthor-left">
				<image :src="pramdata.avatar" @click="gouserdeta(pramdata.id)"/>
				<span class="articleauthorname">{{pramdata.nickname}}</span>
				</view>
<!-- 			<view class="follow" @click="followthis" v-if="nogetdata && !isSelf && !followlist.includes(pramdata.id)">关注</view>
			<view>{{greeting(this.pramdata)}}</view> -->
				<view class="follow" @click="removefollow" v-if="greeting(this.pramdata)==1">互相关注</view>
				<view class="follow" @click="removefollow" v-if="greeting(this.pramdata)==2">已关注</view>
				<view class="follow" @click="followthat"   v-if="greeting(this.pramdata)==3">回关</view>
				<view class="follow" @click="followthat"   v-if="greeting(this.pramdata)==4">关注</view>
			</view>
			<view v-html="code" style="padding: 1rem;padding-bottom: 5rem;" class="codetl"></view>
			<view class="botmtab">
				<view class="click"><image :src="dzicon" @click="dzclick" /><span class="num">{{zannum==0?'赞':zannum}}</span></view>
				<view class="click"><image :src="xi" @click="plclick"/><span class="num">评论</span></view>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff"  border-radius="10px 10px 0 0">
				<view class="plcon">
					<view class="toptab">
						<view class="off">
							<image :src="off" @click="close"/>
						</view>
					</view>
					<view class="nulpl" v-if="overollidt.length==0">
						<image :src="plicon" mode="aspectFit"/>
						<text>暂时还没人评论，快去评论吧</text>
					</view>
					<view class="youpl" v-else>
						<view class="singlepl"  v-for="(item,index) in overollidt">
							<view class="plinfo">
								<image :src="item.avatar" @click="gouserdeta(item.userid)"/>
							</view>
							<view class="plitext">
								<text class="usernick">{{item.nickname}}<span @click="gouserdeta(item.goaluserid)" class="huifuat" v-if="item.goalnickname !==undefined">回复@{{item.goalnickname}}</span></text>
								<text class="text" @click="writep2(item.reviewid)">{{item.content}}</text>
							</view>
						</view>
					</view>
					<view class="gopl">
						<image :src='avatarUrl' />
						<text @click="writepl">写评论</text>
					</view>
					
					<uni-popup ref="popupwrite" mask-background-color="rgb(131 126 126 / 10%)" type="bottom" background-color="#fff">
						<view class="writepl">
							<textarea v-model="plpram.pltext" auto-height placeholder="请输入评论"/>
							<view class="fas">
								<text @click="sendtext" :style="{ color: plpram.pltext.length>0 ? '#5b92c1' : '#8f8f8f' }">发送</text>
							</view>						
						</view>
					</uni-popup>
					<uni-popup ref="popupwrite2" mask-background-color="rgb(131 126 126 / 10%)" type="bottom" background-color="#fff">
						<view class="writepl">
							<textarea v-model="hfpram.pltext" auto-height placeholder="请输入回复"/>
							<view class="fas">
								<text @click="huifutext" :style="{ color: plpram.pltext.length>0 ? '#5b92c1' : '#8f8f8f' }">发送</text>
							</view>						
						</view>
					</uni-popup>
				</view>
				
			</uni-popup>
	</view>
</template>

<script>
	import { judrelation,followthis,otherguanzhu } from '@/utils/Dataprocessing.js'
import websocketManager from '@/websocketService.js';
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import { getdetails,likearticle,addreview } from '@/request/setarticle.js'
	export default {
		name: 'MyTemplateComponent',
		components: {
			uniNavBar
		},
		data() {
			return {
				plpram:{
					pltext:'',
					pltype:'pl',
					id:this.$store.state.id,
					articleid:''
				},
				hfpram:{
					goalreviewid:'',
					pltext:'',
					pltype:'hf',
					id:this.$store.state.id,
					articleid:'',
				},
				overollidt:[],
				pinlunlist:'',
				Iswrite:true,
				avatarUrl:this.$store.state.imageurl,
				zannum:0,
				off:require('@/static/detali/off.png'),
				dzicon:require('@/static/detali/zan.png'),
				plicon:require('@/static/detali/nopl.png'),
				zan:require('@/static/detali/zan.png'),
				zan2:require('@/static/detali/zan2.png'),
				xi:require('@/static/detali/xi.png'),
				nogetdata:false,
				followlist:this.$store.state.followlist,
				addfollowlist:{
					nowuserid:this.$store.state.id,
					followid:'',
					type:'followthat'
				},
				noeuserid:this.$store.state.id,
				imageUrl:'',
				// 在这里添加数据
				pram:{
					companyOrgId:'',
				},
				code:"",
				pramdata:'',
			};
		},
		computed: {
		   isSelf(){
			 return this.pramdata.id == this.noeuserid;
			
		   }
		  },
		// onShow() {
		// 	this.gethisdetails()
		// },
		onLoad(options) {
			this.pram.companyOrgId=options.companyOrgId
			this.gethisdetails()
		},
		watch: {
		    '$store.state.followlist': {
		      handler(newValue) {
		        // 当 store 中的 followlist 发生变化时，更新组件的数据
		        this.followlist = newValue;
		      },
		      deep: true, // 开启深度监听，如果 followlist 是一个对象或数组
		      // immediate: true // 立即触发 handler，这会在组件创建时使用初始状态更新一次数据
		    }
		  },
		methods: {
			//点击回复评论
			huifutext(){
				if(this.hfpram.pltext.length==0){
					return
				}else{
					this.hfpram.articleid=this.pramdata.articleid
				
					addreview(this.hfpram).then((e)=>{
						this.gethisdetails()
						this.$refs.popupwrite2.close()
					})
				}
			},
			// 点击发送评论
			sendtext(){
				if(this.plpram.pltext.length==0){
					return
				}else{
					this.plpram.articleid=this.pramdata.articleid
					addreview(this.plpram).then((e)=>{
						this.gethisdetails()
						this.$refs.popupwrite.close()
					})
				}
				
			},
			writepl(){
				this.Iswrite=false
				this.$refs.popupwrite.open('bottom')
			},
			writep2(id){
				this.hfpram.goalreviewid=id
				this.Iswrite=false
				this.$refs.popupwrite2.open('bottom')
			},
			// 用户点赞
			dzclick(){
				
				let pram = {}
				pram.islike = JSON.parse(this.pramdata.likelist).includes(this.noeuserid)?1:0
				pram.userid = this.noeuserid
				pram.articleid=this.pramdata.articleid
				likearticle(pram).then((e)=>{
					this.gethisdetails()
				})
			},
			plclick(){
				this.$refs.popup.open('bottom')
			},
			close() {
						this.$refs.popup.close()
					},
			greeting(e){
				return judrelation(e)
			},
			// 点击跳转至用户详情页
			gouserdeta(e){
				uni.navigateTo({
					url: `/pages/components/userdetails?userid=${e}` // 注意路径格式  
				});
			},
			//点击关注
			followthat(){
			 
				followthis(this.addfollowlist).then((e)=>{
					uni.showToast({
						title: '关注成功',
						icon: 'none',
						duration: 2000,
					}) 
					websocketManager.send(this.addfollowlist);		
				this.gethisdetails()
				})
			},
			removefollow(){
				uni.showModal({
					// title: '提示',
					content: '不再关注该用户',
					success: (res)=> {
						if (res.confirm) {
								otherguanzhu(this.addfollowlist).then((e)=>{
									this.gethisdetails()
								})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			gethisdetails() {
				getdetails(this.pram).then((e)=>{
					this.nogetdata=true
					this.overollidt=[]
					this.code=e.data.code
					this.pramdata=e.data
					this.zannum=e.data.likenum
					this.addfollowlist.followid=e.data.id
					this.pinlunlist=e.data.review
					this.addParentInfo(this.pinlunlist)
					this.styleinitialize()
				})
			},
			//样式初始化
			styleinitialize(){
				JSON.parse(this.pramdata.likelist).includes(this.noeuserid)?this.dzicon=this.zan2:this.dzicon=this.zan
			},
			naxie(){
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			addParentInfo(comments) {
				if(comments==null){
					return
				}else{
					// 遍历顶级评论
					comments.forEach(comment => {
					    const { nickname, userid } = comment;  // 获取当前评论的昵称和用户ID
						this.overollidt.push(comment)
					    if (comment.replies) {
					        // 如果有回复，则为这些回复添加父级信息
					        comment.replies.forEach(reply => {
					            reply.goalnickname = nickname;
					            reply.goaluserid = userid;
								this.overollidt.push(reply)
					            // 递归处理嵌套的回复
					            if (reply.replies) {
					                this.addParentInfo([reply]);  // 传递单个对象数组以保持一致性
					            }
					        });
					    }
					});
				}
	
			}
		}
	};
</script>
<style lang="less">
	.codetl{
		p{
			img{
				width: 100%;
				height: 100%;
			}
		}
		
	}
</style>
<style lang="less" scoped>
	
	.plcon{
		    display: flex;
		    flex-direction: column;
		height: 80vh;
		.toptab{
			height: 2.5rem;
			    display: flex;
			    align-items: center;
			image{
				margin-top: 0.5rem;
				margin-left: 0.7rem;
				height: 1.5rem;
				width: 1.5rem;
				object-fit: contain;
			}
		}
		.nulpl{
			height: 100%;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			image{
				margin-top: 4rem;
				// width: 30%;
				}
				text{
					margin-top: 1rem;
				}
		}
		.youpl{
			height: 100%;
			.singlepl{
				display: flex;
				    align-items: center;
				min-height: 5rem;
				.plinfo{	
					    width: 4rem;
					    text-align: center;
					    height: 5rem;
					    display: flex;
					    align-items: flex-start;
					    justify-content: center;
					image{
						width: 2rem;
						height: 2rem;
						object-fit: contain;
						border-radius: 50%;
					}
				}
				.plitext{
					margin-right: 1rem;
					border-bottom: 1px solid #f1f0f5;
					flex: 1;
					min-height:5rem;
					display: flex;
					flex-direction: column;
					.usernick{
						margin: 0.3rem 0 0 0;
						color: #757070;
						.huifuat{
							color: #4f7db3;
							margin-left: 0.2rem;
						}
					}
					.text{
						   padding: 0 0 1rem 0;
					}
				}
			}
		}
		.gopl{
			  border-top: 1px solid #f3ebeb;
			  height: 4rem;
			    display: flex;
			    align-items: center;
			image{
				margin-left: 1rem;
				width: 2rem;
				height: 2rem;
				object-fit: contain;
				border-radius: 50%;
			}
			text{
					margin-left: 1rem;
			}
			
		}
		.writepl{
			  
			    margin: 1rem 1rem;
			   
			// min-height: 4rem;
			    
				uni-textarea{
					padding: 0.2rem;
					width: 100%;
					 border-radius: 0.4rem;
					min-height: 4rem;
					  background: #f1f0f5;
					  max-height: 6rem;
					  overflow: auto;
				}
				.fas{
					    height: 2rem;
					    display: flex;
					    justify-content: flex-end;
					    align-items: center;
					    color: #9d9d9d;
				}
		}
	}
	.botmtab{
		display: flex;
		    align-items: center;
		    justify-content: flex-end;
   background: #fff;
       border-top: 1px solid #e7e7e7;
    width: 100%;
    height: 3rem;
    position: fixed;
    bottom: 0px;
	.click{
		    width: 2rem;
		    height: 3rem;
		    margin-right: 1rem;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		image{
			width: 1.5rem;
			height: 1.5rem;
			object-fit: contain;
		}
		.num{
			    font-size: 0.8rem;
		}
	}
	}
	.articleauthor{
		    height: 2rem;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
			.articleauthor-left{
				display: flex;
				image{
					border-radius: 50%;
					width: 2rem;
					height: 2rem;
					object-fit: cover;
					margin-left: 1rem;
				}
				.articleauthorname{
					margin-left: 1rem;
					font-size: 0.8rem;
					font-weight: 600;
					height: 2rem;
					line-height: 2rem;
				}
			}
			.follow{
				margin-right: 1rem;
				font-size: 0.8rem;
				padding: 0.2rem 1rem;
				border: 1px solid #ada6a6;
				border-radius: 0.9rem;
				    text-align: center;
			}
	
	}
	.title{
		padding: 1rem;
		font-weight: 600;
	}
	p{
	image{
		max-width: 80%;
		    object-fit: cover;
	}	
	}
	
</style>